<template>
  <div class="login">
    <div class="form-content">
      <div class="login-title">
        登录
      </div>
      <a-form
        layout="horizontal"
        :model="formState"
        @finish="handleFinish"
        @finishFailed="handleFinishFailed"
      >
        <a-form-item>
          <a-input v-model:value="formState.username" placeholder="Username">
            <template #prefix
              ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
            /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-model:value="formState.password"
            type="password"
            placeholder="Password"
          >
            <template #prefix
              ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
            /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <div class="login-btn">
            <a-button
              :loading="loginLoading"
              type="primary"
              html-type="submit"
              :disabled="formState.username === '' || formState.password === ''"
            >
              登录
            </a-button>
            <a-button type="primary">
              注册
            </a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";
import { defineComponent, reactive, UnwrapRef, ref } from "vue";
import $http from "@/api";
interface FormState {
  username: string;
  password: string;
}
export default defineComponent({
  setup() {
    const formState: UnwrapRef<FormState> = reactive({
      username: "",
      password: "",
    });

    const loginLoading = ref<boolean>(false);
    const handleFinish = async (values: FormState) => {
      const { data } = await $http.user.login({
        username: formState.username,
        password: formState.password,
      });
      if (data.code === 200) {
        message.success(data.msg);
      } else {
        message.error(data.msg);
      }
      console.log(data);
    };
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      console.log(errors);
    };
    return {
      formState,
      loginLoading,
      handleFinish,
      handleFinishFailed,
    };
  },
  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  position: relative;
  background: url('~@/assets/image/login-bg.jpg') no-repeat;
  background-size: cover;
}
.form-content {
  background: #fff;
  border-radius: 10px;
  position: absolute;
  padding: 0 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 300px;
  .login-title {
    text-align: center;
    font-size: 20px;
    padding: 20px 0;
  }
  .login-btn {
    text-align: center;
    .ant-btn {
      margin: 0 10px;
    }
  }
}
</style>
